<template>
  <div>
    <!-- mode==1正常的日期选择器 -->
    <template v-if="mode==1">
      <el-date-picker style="width: 100%" v-model="dates" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="至"
        start-placeholder="开始日期" end-placeholder="结束日期" @change="change" :default-time="['00:00:00', '23:59:59']" :clearable="clearable"></el-date-picker>
    </template>
    <!-- mode==2限制日期在一个月之内的选择器-->
    <template v-else-if="mode==2">
      <el-date-picker style="width: 100%" v-model="dates" value-format="yyyy-MM-dd" :picker-options="pickerOptions"
        type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="change"
        :clearable="clearable"></el-date-picker>
    </template>
    <!-- 选择一年之内的月份 -->
    <template v-else-if="mode==3">
      <el-date-picker v-model="dates" type="monthrange" value-format="yyyy-MM" :picker-options="pickerOptions2"
        range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" @change="change" :clearable="clearable">
      </el-date-picker>
    </template>
    <!-- 只选择月份 -->
    <template v-else-if="mode==4">
      <el-date-picker style="width: 100%" v-model="dates" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
        start-placeholder="开始日期" end-placeholder="结束日期" @change="change" :clearable="clearable"></el-date-picker>
    </template>
    <!-- 不传mode默认为日期时间选择器 -->
    <template v-else>
      <el-date-picker style="width: 100%" v-model="dates" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="change" :clearable="clearable">
      </el-date-picker>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dates: [],
      pickerMinDate: null,
      pickerMaxDate: null,
      day31: 31 * 24 * 3600 * 1000,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          if (minDate && this.pickerMinDate) {
            this.pickerMinDate = null;
          } else if (minDate) {
            this.pickerMinDate = minDate.getTime();
          }
        },
        disabledDate: time => {
          if (this.pickerMinDate) {
            return (
              time.getTime() > this.pickerMinDate + this.day31 ||
              time.getTime() < this.pickerMinDate - this.day31
            );
          }
          return false;
        }
      },
      day365: 365 * 24 * 3600 * 1000,
      pickerOptions2: {
        onPick: ({ maxDate, minDate }) => {
          if (minDate && this.pickerMinDate) {
            this.pickerMinDate = null;
          } else if (minDate) {
            this.pickerMinDate = minDate.getTime();
          }
        },
        disabledDate: time => {
          if (this.pickerMinDate) {
            return (
              time.getTime() > this.pickerMinDate + this.day365 ||
              time.getTime() < this.pickerMinDate - this.day365
            );
          }
          return false;
        }
      }
    };
  },
  props: {
    startDate: "",
    endDate: "",
    mode: "",
    clearable: true
  },
  watch: {
    startDate: {
      immediate: true,
      handler(val, old) {
        if (!this.dates) {
          this.dates = [];
        }
        //直接赋值时回显未改变使用set赋值
        // this.dates[0] = val || "";
        this.$set(this.dates, "0", val || "");
      }
    },
    endDate: {
      immediate: true,
      handler(val, old) {
        if (!this.dates) {
          this.dates = [];
        }
        //直接赋值时回显未改变使用set赋值
        // this.dates[1] = val || "";
        this.$set(this.dates, "1", val || "");
      }
    }
  },
  methods: {
    change(val) {
      if (val && val.length == 2) {
        this.$emit("update:startDate", val[0]);
        this.$emit("update:endDate", val[1]);
      } else {
        this.$emit("update:startDate", "");
        this.$emit("update:endDate", "");
      }
    }
  }
};
</script>

<style>
</style>